@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-fields';
@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';

$sizes: 's', 'm', 'l';
$header-typography: (
  's': $sans-label-m,
  'm': $sans-label-l,
  'l': $sans-label-l,
);
$footer-typography: (
  's': $sans-body-s,
  'm': $sans-body-m,
  'l': $sans-body-m,
);
$hint-icon-container: (
  's': $fields-hint-icon-container-s,
  'm': $fields-hint-icon-container-m,
  'l': $fields-hint-icon-container-m,
);
$caption-typography: (
  's': $sans-body-s,
  'm': $sans-body-m,
  'l': $sans-body-m,
);

.decorator {
  display: flex;
  flex-direction: column;
  flex-grow: 1;

  width: 100%;
  min-width: 0;

  @each $size in $sizes {
    &[data-size='#{$size}'] {
      @include composite-var($fields, 'decorator', $size);
    }
  }
}

.header {
  display: flex;
  gap: $dimension-050m;
  box-sizing: border-box;
  color: $sys-neutral-text-support;

  @each $size in $sizes {
    &[data-size='#{$size}'] {
      @include composite-var($header-typography, $size);

      .caption {
        @include composite-var($caption-typography, $size);

        margin-left: auto;
        color: $sys-neutral-text-light;
      }
    }
  }
}

.labelLayout {
  @include composite-var($fields-label-label-layout);

  display: inline-flex;
  align-items: center;
  color: $sys-neutral-text-light;
}

.label {
  display: grid;
  color: $sys-neutral-text-support;
}

.required {
  color: $sys-neutral-text-support;
}

.footer {
  @include composite-var($fields-hint-container);

  display: flex;
  justify-content: space-between;
  box-sizing: border-box;

  @each $size in $sizes {
    &[data-size='#{$size}'] {
      @include composite-var($footer-typography, $size);
    }
  }

  &[data-reverse] {
    justify-content: flex-end;
  }
}

.hintLayout {
  @include composite-var($fields-hint-hint-layout);

  display: inline-flex;
  align-items: flex-start;
}

.hintIconContainer {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;

  @each $size in $sizes {
    &[data-size='#{$size}'] {
      @include composite-var($hint-icon-container, $size);
    }
  }
}

.hint {
  display: grid;
  flex-grow: 1;
  word-break: break-word;

  &[data-validation='default'] {
    color: $sys-neutral-text-light;
  }

  &[data-validation='error'] {
    color: $sys-red-text-main;
  }

  &[data-validation='warning'] {
    color: $sys-yellow-text-main;
  }

  &[data-validation='success'] {
    color: $sys-green-text-main;
  }
}

.icon {
  flex-shrink: 0;
  box-sizing: content-box;
  color: $sys-neutral-text-light;
}

.hintIcon {
  flex-shrink: 0;
  box-sizing: content-box;

  &[data-validation='default'] {
    color: $sys-neutral-accent-default;
  }

  &[data-validation='error'] {
    color: $sys-red-accent-default;
  }

  &[data-validation='warning'] {
    color: $sys-yellow-accent-default;
  }

  &[data-validation='success'] {
    color: $sys-green-accent-default;
  }
}

.counterLimit {
  > span {
    &[data-validation='default'] {
      color: $sys-neutral-text-light;
    }

    &[data-limit-exceeded],
    &[data-validation='error'] {
      color: $sys-red-text-light;
    }

    &[data-validation='warning'] {
      color: $sys-yellow-text-light;
    }

    &[data-validation='success'] {
      color: $sys-green-text-light;
    }
  }
}

.counterCurrentValue {
  &[data-limit-exceeded] {
    &[data-validation='default'] {
      color: $sys-neutral-text-main;
    }
    &[data-validation='error'] {
      color: $sys-red-text-main;
    }

    &[data-validation='warning'] {
      color: $sys-yellow-text-main;
    }

    &[data-validation='success'] {
      color: $sys-green-text-light;
    }
  }
}

.labelTooltipTrigger {
  cursor: pointer;
  display: flex;
  align-items: center;
  height: 100%;
}